<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老婆大人来了</title>
    <style>
        body {
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
            background: linear-gradient(135deg, #ffcce6, #e6f2ff);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
        }
        
        .container {
            text-align: center;
            max-width: 800px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 1;
        }
        
        h1 {
            color: #ff66b3;
            margin-bottom: 10px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 1.2em;
        }
        
        .countdown {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .countdown-item {
            background: white;
            padding: 15px 20px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            min-width: 80px;
        }
        
        .countdown-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #ff66b3;
            margin-bottom: 5px;
        }
        
        .countdown-label {
            font-size: 0.9em;
            color: #666;
        }
        
        .scene {
            position: relative;
            height: 300px;
            width: 100%;
            margin: 30px 0;
            overflow: hidden;
            border-radius: 15px;
            background: linear-gradient(to bottom, #87CEEB 60%, #E0F7FA 100%);
        }
        
        .cloud {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0.8;
        }
        
        .plane {
            position: absolute;
            width: 100px;
            height: 80px;
            left: 10%;
            top: 40%;
            transform: translateY(-50%);
            transition: left 0.1s linear;
            z-index: 10;
        }
        
        .plane-body {
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        .plane-fuselage {
            position: absolute;
            width: 80px;
            height: 30px;
            background: #ff9999;
            border-radius: 30px 10px 10px 30px;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        
        .plane-wing {
            position: absolute;
            width: 70px;
            height: 15px;
            background: #ff6666;
            border-radius: 5px;
            top: 50%;
            left: 15px;
            transform: translateY(-50%) rotate(-5deg);
        }
        
        .plane-tail {
            position: absolute;
            width: 20px;
            height: 15px;
            background: #ff6666;
            border-radius: 5px;
            top: 30%;
            right: 0;
            transform: rotate(45deg);
        }
        
        .plane-window {
            position: absolute;
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
        }
        
        .japan-flag {
            position: absolute;
            width: 30px;
            height: 20px;
            background: white;
            border: 1px solid #ccc;
            right: 10%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
        }
        
        .japan-flag::before {
            content: "";
            position: absolute;
            width: 12px;
            height: 12px;
            background: #ff3333;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .shanghai-text, .japan-text {
            position: absolute;
            font-weight: bold;
            color: #333;
            background: rgba(255, 255, 255, 0.7);
            padding: 5px 10px;
            border-radius: 10px;
        }
        
        .shanghai-text {
            left: 5%;
            top: 70%;
        }
        
        .japan-text {
            right: 5%;
            top: 70%;
        }
        
        .heart-trail {
            position: absolute;
            width: 15px;
            height: 15px;
            background: #ff66b3;
            transform: rotate(45deg);
            opacity: 0;
            animation: fadeHeart 2s forwards;
        }
        
        @keyframes fadeHeart {
            0% { opacity: 0.8; transform: rotate(45deg) scale(1); }
            100% { opacity: 0; transform: rotate(45deg) scale(0.5); }
        }
        
        .message {
            margin-top: 20px;
            font-size: 1.2em;
            color: #666;
            line-height: 1.6;
        }
        
        .highlight {
            color: #ff66b3;
            font-weight: bold;
        }
        
        @media (max-width: 600px) {
            .countdown {
                flex-wrap: wrap;
            }
            
            .countdown-item {
                min-width: 60px;
                padding: 10px 15px;
            }
            
            .countdown-number {
                font-size: 2em;
            }
            
            h1 {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>浪漫相见倒计时</h1>
        <div class="subtitle">2025年6月27日23:00 上海 ✈ 日本</div>
        
        <div class="countdown">
            <div class="countdown-item">
                <div class="countdown-number" id="days">00</div>
                <div class="countdown-label">天</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="hours">00</div>
                <div class="countdown-label">小时</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="minutes">00</div>
                <div class="countdown-label">分钟</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="seconds">00</div>
                <div class="countdown-label">秒</div>
            </div>
        </div>
        
        <div class="scene">
            <div class="shanghai-text">杭州</div>
            <div class="japan-text">东京</div>
            <div class="japan-flag"></div>
            <div class="plane">
                <div class="plane-body">
                    <div class="plane-fuselage"></div>
                    <div class="plane-wing"></div>
                    <div class="plane-tail"></div>
                    <div class="plane-window"></div>
                </div>
            </div>
        </div>
        
        <div class="message">
            距离<span class="highlight">珊珊</span>从上海飞往日本与<span class="highlight">聪聪</span>相见还有 <span id="countdown-text">0天0小时0分0秒</span>。<br>
            每一秒都让我们的心更近一点 ❤
        </div>
    </div>

    <script>
        // 创建云朵
        function createClouds() {
            const scene = document.querySelector('.scene');
            for (let i = 0; i < 10; i++) {
                const cloud = document.createElement('div');
                cloud.className = 'cloud';
                
                // 随机大小
                const size = Math.random() * 50 + 30;
                cloud.style.width = `${size}px`;
                cloud.style.height = `${size * 0.6}px`;
                
                // 随机位置
                cloud.style.left = `${Math.random() * 100}%`;
                cloud.style.top = `${Math.random() * 50 + 10}%`;
                
                // 随机动画
                const duration = Math.random() * 30 + 20;
                cloud.style.animation = `float ${duration}s linear infinite`;
                
                scene.appendChild(cloud);
            }
        }
        
        // 创建心形轨迹
        function createHeartTrail() {
            const plane = document.querySelector('.plane');
            const heart = document.createElement('div');
            heart.className = 'heart-trail';
            
            // 获取飞机位置
            const planeRect = plane.getBoundingClientRect();
            const sceneRect = document.querySelector('.scene').getBoundingClientRect();
            
            // 设置心形位置
            heart.style.left = `${planeRect.left - sceneRect.left - 7}px`;
            heart.style.top = `${planeRect.top - sceneRect.top + 20}px`;
            
            document.querySelector('.scene').appendChild(heart);
            
            // 动画结束后移除
            setTimeout(() => {
                heart.remove();
            }, 2000);
        }
        
        // 更新倒计时
        function updateCountdown() {
            const targetDate = new Date('2025-06-27T23:00:00+08:00'); // 上海时间
            const now = new Date();
            
            // 如果时间已到，显示团聚信息
            if (now >= targetDate) {
                document.getElementById('days').textContent = '00';
                document.getElementById('hours').textContent = '00';
                document.getElementById('minutes').textContent = '00';
                document.getElementById('seconds').textContent = '00';
                document.getElementById('countdown-text').textContent = '她已到达！';
                document.querySelector('.message').innerHTML = '<span class="highlight">珊珊</span>已经到达日本与<span class="highlight">聪聪</span>团聚了！❤❤❤';
                return;
            }
            
            const diff = targetDate - now;
            
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            document.getElementById('days').textContent = days.toString().padStart(2, '0');
            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
            document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
            
            document.getElementById('countdown-text').textContent = `${days}天${hours}小时${minutes}分${seconds}秒`;
            
            // 更新飞机位置
            updatePlanePosition(diff);
        }
        
        // 更新飞机位置
        function updatePlanePosition(diff) {
            const totalDuration = new Date('2025-06-27T23:00:00+08:00') - new Date('2025-06-27T00:00:00+08:00');
            const timePassed = totalDuration - diff;
            const progress = Math.min(1, timePassed / totalDuration);
            
            const plane = document.querySelector('.plane');
            plane.style.left = `${10 + progress * 70}%`;
            
            // 添加轻微的上下浮动效果
            const floatAmount = Math.sin(Date.now() / 300) * 5;
            plane.style.top = `calc(40% + ${floatAmount}px)`;
            
            // 偶尔创建心形轨迹
            if (Math.random() < 0.1) {
                createHeartTrail();
            }
        }
        
        // 初始化
        createClouds();
        updateCountdown();
        setInterval(updateCountdown, 1000);
        
        // 添加浮动云朵的动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes float {
                from { transform: translateX(0); }
                to { transform: translateX(calc(100vw + 100px)); }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>